<template>
  <BorderBox10 class="w-full h-full">
    <Title
      class="pt-4"
      :title="`每日新增用户`"
    />
    <div class="w-full h-80 mt-4 flex flex-row p-6 box-border gap-4">
      <div class="w-1/2 h-full">
        <Mid
          v-if="isShow"
          :line-data="line"
          @changeDate="changeDate"
        />
      </div>

      <div class="w-1/2  max-h-60 overflow-y-auto">
        <div
          v-for="(item, index) in registrants_rank"
          :key="index"
          class="py-2"
        >
          <p class="lists w-full h-full leading-8 flex text-slate-300 flex-row text-base">
            <span class="pr-4"> {{ index + 1 }}</span>
            <span class="flex-1"> {{ item.name }}</span>
            <span class="text-[#00FFFF]"> {{ item.count }}</span>
          </p>
        </div>
      </div>
    </div>
  </BorderBox10>
</template>

<script setup>
import { BorderBox10, Decoration8 } from '@kjgl77/datav-vue3'
import { defineProps, ref, watch } from 'vue'
import Mid from '@/view/memberManager/components/mid.vue'
import Title from '@/view/memberManager/components/title.vue'
const props = defineProps({
  line: {
    type: Object,
    default: () => {}
  },
  isShow: {
    type: Boolean,
    default: false
  },
})

const registrants_rank = ref([])

const activeDate = ref('')

const changeDate = (date) => {
  let values = []
  var registrants_rank_value = []
  if (!date || date === activeDate.value) {
    for (const key in props.line) {
      values.push(...props.line[key])
    }
  } else {
    values = props.line[date]
    activeDate.value = date
  }
  values?.forEach(item => {
    registrants_rank_value.push(item)
  })
  registrants_rank.value = registrants_rank_value

  console.log(registrants_rank.value)
}

watch(() => props.line, () => {
  changeDate()
})

</script>

<style scoped>
.lists {
  border-bottom: 1px solid #53749C;
}
</style>
